let id = ''
// 校验登录状态
checklogin()
// 页面数据的渲染
renderUserName()
// 获取省市区
const province = document.querySelector('[name="province"]')
const city = document.querySelector('[name="city"]')
const area = document.querySelector('[name="area"]')
// 省市区的选择
pplace()
async function pplace() {
    // 省市区的渲染
    // 省
    await getProvince()
    async function getProvince() {
        // 从服务器里面拿出省份信息
        // 省
        const { list } = await axios({ url: '/api/province' })
        //    测试获取省份成功
        //   console.log(list);
        // 坑点：1.属性选择器语法：[属性名="属性值"]
        // 坑点：2.map返回一个数组，innerHtml只能识别字符串，所以需要join拼接成一个字符串 
        const provincee = list.map(item => `<option value=${item}>${item}</option>`).join('')
        province.innerHTML = `<option value=0>请选择省份</option>` + provincee
    }
    // 市
    // 点击省 选择市 
    // 使用change事件
    // !!!!!!!!!!!!!!!!!!!!!!!!
    // 函数独立化完成 要拆分 省的请求渲染就写省的函数 市的就写市的 区的就写区的
    // getCity就是请求渲染市的
    // 请求参数也不能使用this了 把你的籍贯选项框都提到全局了 用选项框的value值
    // 下面点击修改后就就await相应函数 应该就能拿到数据了
   getCity()
    async function getCity() {
        province.addEventListener('change', ()=>{getCity})
        async function getCity() {
            // if(this.value===0){
            //    return
            // }
            const { list } = await axios({ url: '/api/city', params: { pname: province.value } })
            const cityy = list.map(item => `<option value=${item}>${item}</option>`).join('')
            city.innerHTML = `<option value=0>请选择市</option>` + cityy

        }
    }




    // 区
    // 点击市，选择区
    // 使用change事件
    city.addEventListener('change', async function () {
        // 使用axios请求获取区
        const { list } = await axios({ url: '/api/area', params: { pname: province.value, cname: city.value } })
        //    获取area属性选择器的标签
        //   const area=document.querySelector('[name="area"]')
        //   将获取的区渲染area
        const areaa = list.map(item => `<option value=${item}>${item}</option>`).join('')
        //   渲染第一个option选项：请选择去
        area.innerHTML = `<option value=0>请选择区</option>` + areaa


    })
}
// 一：退出登录
document.querySelector('#logout').addEventListener('click', function () {
    // 删除token
    localStorage.removeItem('token')
    // 跳转登录
    location.href = './login.html'
})
// 二：更新用户名
function renderUserName() {
    const username = localStorage.getItem('username')
    document.querySelector('.username').innerHTML = username
}
const total = document.querySelector('.total')
//三： 渲染学生列表
// 单纯的渲染 不请求后台
function renderStudent(res) {
    // 1.渲染学生人数
    total.innerHTML = res.data.length
    //   2.查询学生列表信息 ---从后台获取到的学生信息渲染到界面上
    const htmlArr = res.data.map((item) => {
        // 解构
        const { name, age, gender, group, hope_salary, salary, province, city, area, id } = item
        return ` <tr>
                       <td>${name}</td>
                       <td>${age}</td>
                       <td>${gender === 1 ? '女' : '男'}</td>
                       <td>第${group}组</td>
                       <td>${hope_salary}</td>
                       <td>${salary}</td>
                       <td>${province}${city}${area}</td>
                       <td>
                         <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${id}"></i></a>
                         <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${id}"></i></a>
                       </td>
                     </tr> `
    })
    const htmlStr = htmlArr.join('')
    document.querySelector('.list').innerHTML = htmlStr
    //    console.log(htmlStr);
}
// 四：增删改查
//  查
getStudent()
//   1.查询学生列表信息 
async function getStudent() {
    // 从后台获取学生信息
    const res = await axios({ url: '/students' })
    // console.log(res.data);
    // 调用渲染函数 传入参数 
    renderStudent(res)
}
// 删
//   1.删除学生列表信息 
document.querySelector('.list').addEventListener('click', async function (e) {
    //    删除
    // 利用事件委托
    if (e.target.className === 'bi bi-trash') {
        // 测试点击按钮
        // console.log(1);
        // 确定是否要删除
        if (confirm("确认要删除吗？")) {
            const id = e.target.dataset.id
            // 删除没有返回的东西
            axios({
                url: `/students/${id}`,
                method: 'DELETE'
            }).then(res => {
                // 删除成功之后，重新获取数据并渲染
                getStudent()
            })
        }
    }
    // 修改
    if (e.target.className === 'bi bi-pen') {
        // 测试修改按钮
        // console.log(1);
        id = e.target.dataset.id
        // 弹出模态框
        modal.show()
        // 先请求获取要修改的数据
        let res = await axios({
            url: `/students/${id}`
        })
        //   console.log(res);
        // 获取表单元素
        const addForm = document.querySelector('form')
        // 回填数据
        // 向表单元素里面添加数据 
        addForm.querySelector('[name="name"]').value = res.data.name
        if (res.data.gender == 1) {
            addForm.querySelector('[value="1"]').checked = true
        } else {
            addForm.querySelector('[value="0"]').checked = true
        }
        addForm.querySelector('[name="age"]').value = res.data.age
        addForm.querySelector('[name="group"]').value = res.data.group
        addForm.querySelector('[name="hope_salary"]').value = res.data.hope_salary
        addForm.querySelector('[name="salary"]').value = res.data.salary
        // 下拉框必须有选项 才能设置值 找到对应的option值 设置selected
        await pplace()
        const pOptions = document.querySelectorAll('[name=province] option')
        const cOptions = document.querySelectorAll('[name=city] option')
        const aOptions = document.querySelectorAll('[name=area] option')
        // 省
        pOptions.forEach(item => {
            if (item.innerText === res.data.province) {
                item.selected = true
            }
        })
        // 市
        cOptions.forEach(item => {
            if (item.innerText === res.data.city) {
                item.selected = true
            }
        })
        // 区
        aOptions.forEach(item => {
            if (item.innerText === res.data.city) {
                item.selected = true
            }
        })
    }

})
// 增
// 初始化模态框---实例化模态框，以便点开时 模态框展示 确认时隐藏模态框
const modal = new bootstrap.Modal(document.querySelector('.modal'))
document.querySelector('#openModal').addEventListener('click', function (e) {
    e.preventDefault()
    // 展开模态框
    modal.show()
    // 调用地区的函数
    pplace()

})
// 点击模态框的确认按钮，收集表单数据并且上传用户所填写的信息
document.querySelector('#submit').addEventListener('click', function () {
    // 收集表单数据
    const addForm = document.querySelector('form')
    const data = serialize(addForm, { hash: true, empty: true })
    // 测试表单数据是否收集成功
    // console.log(data);
    // 处理数据 
    // 1.校验数据
    // if(data.name.trim().length>30){
    //    alert('输入的姓名不能大于30')
    // }
    // 校验所有的数据是否为空
    // console.log(Object.values(data)); 将对象的所有属性值转化为数组
    // 所有字段名不能为空
    if (Object.values(data).every(item => item.trim().length > 0)) {
        //    组号必须在1-8之间
        if (data.group < 1 || data.group > 8) {
            return alert('组号不符合规定')
        }
        //     处理数据
        data.age = Number(data.age)
        data.gender = Number(data.gender)
        data.salary = Number(data.salary)
        data.hope_salary = Number(data.hope_salary)
        data.group = Number(data.group)
        // 提交服务器
        axios({
            url: '/students',
            method: 'POST',
            data: data
        })
        // 再次请求最新的数据渲染
        getStudent()
        // 隐藏模态框
        modal.hide()
    } else {
        return alert('字段名不能为空')
    }
})
// 改



